<template>
    <div class="scrollContainer">
        <div class="biaoqianhang">
            <div v-for="item in sun" :key="item.id" class="biaoqian">
                {{ item }}
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            // 数据
            sun: ["春节可订", "去哪儿自营", "中文服务", "戏水玩乐", "经典7日游", "专项红包", "去哪儿自营", "中文服务", "戏水玩乐", "经典7日游", "专项红包"]
        }
    },
}
</script>
  
<style scoped lang="scss">
.scrollContainer {
    overflow-x: auto;
    /* 水平滚动 */

}

.biaoqianhang {

    width: 1000px;
    background-color: rgb(205, 213, 221);
    display: flex;
    /* 使用 flex 布局 */
    padding: 10px;
    /* 添加内边距来增加标签之间的空间 */

    .biaoqian {
        line-height: 30px;
        background-color: azure;
        padding: 5px;
        /* 修改标签宽度 */
        height: 30px;
        margin-right: 20px;
        /* 增加标签之间的间距 */
        flex-shrink: 0;
        /* 防止标签被压缩 */
    }
}
</style>
  